<template>
  <div>
    <div class="header-warpper" @click="$router.back(-1)">
      <img src="../../assets/l_jt.png" alt />
      <span>提币记录</span>
    </div>

    <div class="xjwt_block">

      <div class="wt_block" v-for="(item, index) in list" :key="index" @click="$router.push({
          path:'upmoneylist',
          query:{id:item.id}
      })">
        <div class="head">
          <div class="head_left">

            <span class="ns2">{{item.ftype}}</span>&nbsp;

          </div>
          <div class="head_right">
                <span v-if="item.status==1">待审核</span>
                <span v-if="item.status==2">提币成功</span>
                <span v-if="item.status==3">提币失败</span>
                <img src="../../assets/r_jt.png" alt />
          </div>
        </div>
        <div class="content1">
          <div class="ns1">
            <p class="ws1">订单号</p>
            <p class="ws2">{{item.ordersn}}</p>
          </div>
          <div class="ns2">
            <p class="ws1">数量</p>
            <p class="ws2">{{item.allnumber}}</p>
          </div>
          <div class="ns3">
            <p class="ws1">时间</p>
            <p class="ws2">{{item.createtime}}</p>
          </div>
        </div>
        <div class="content2">
          <div class="ns1">
            <p class="ws1">地址</p>
            <p class="ws2">{{item.address}}</p>
          </div>
        </div>
      </div>
    </div>

    <p class="pull">{{newxin}}</p>
  </div>
</template>
<script>
export default {
    created(){
        this.request();
    },
  data() {
    return {
        list:[],
        page:1,
        newxin:""
    };
  },
  mounted() {
    window.addEventListener("scroll", this.handleScroll, true);
  },
  methods:{
      request(s){
          this.$axios.post("/index/asset/tblog",{
               limit:10,
              page:this.page
          })
           .then(res=>{
              console.log(res.data)
              // if(res.data.code==0&&res.data.info.length>0){
              //     !s&&res.data.info.length<9?(this.list=res.data.info,this.newxin="已加载完所有数据")
              //     :(this.list=res.data.info,this.newxin="下拉更新");
              //     s!='undefined'&&res.data.info.length<9?(this.list.concat(res.data.info),this.newxin="已加载完所有数据")
              //     :(this.list.concat(res.data.info),this.newxin="下拉更新");
              // }else{
              //     !s?this.newxin="没有数据":"";
              // }

                  if(res.data.code==0&&res.data.info.length>0){
                  var he=()=>{
                      for(var i=0; i<res.data.info.length; i++){
                        this.list.push(res.data.info[i])
                      }
                  }
                    !s&&res.data.info.length<9?(this.list=res.data.info,this.newxin="已加载完所有数据"):
                    !s&&res.data.info.length>9?(this.list=res.data.info,this.newxin="下拉更新"):"";
                    s&&res.data.info.length<9?(he(),this.newxin="已加载完所有数据")
                    :s?(he(),this.newxin="下拉更新"):'';
                }else{
                  !s?(this.newxin=""):this.newxin="已加载完所有数据";
                }
          })
      },
      //下拉更新  vue下拉更新 下拉加载
    handleScroll() {
      var scrollTop =
        document.documentElement.scrollTop || document.body.scrollTop; //变量windowHeight是可视区的高度
      var windowHeight =
        document.documentElement.clientHeight || document.body.clientHeight; //变量scrollHeight是滚动条的总高度
      var scrollHeight =
        document.documentElement.scrollHeight || document.body.scrollHeight;
      if (scrollTop + windowHeight == scrollHeight) {
        //请求数据接口
        this.list.length > 9 ? (this.page++,this.request(this.page)) : "";
        return false;
      }
    }
  }
};
</script>

<style lang="less" scoped>
.f-flex {
  display: flex;
  display: -webkit-flex;
  align-items: center;
}
.pull {
  font-size: 0.4rem;
  padding: 0.4rem 0;
  text-align: center;
}
.wt_block {
  padding: 0.533333rem 0.4rem;
  border-bottom: 1px solid #f1f1f1;
  .head {
    .f-flex();
    justify-content: space-between;
    .head_left {
      .nsb1 {
        color: #e56337;
        font-size: 0.453333rem;
        font-weight: bold;
        paddgin-right: 0.2rem;
      }
      .nsb2 {
        color: #00bd84;
        font-size: 0.453333rem;
        font-weight: bold;
        paddgin-right: 0.2rem;
      }
      .ns2 {
        color: #000;
        font-size: 0.453333rem;
        font-weight: bold;
      }
      .ns3 {
        color: #a1a7b7;
        font-size: 0.32rem;
      }
      .ns4 {
        color: #a1a7b7;
        font-size: 0.32rem;
      }
    }
    .head_right {
      .f-flex();
      span {
        color: #a1a7b7;
        font-size: 0.373333rem;
        font-weight: bold;
        padding-right: 0.266667rem;
      }
      img {
        width: 0.2rem;
        height: 0.3rem;
      }
    }
  }
  .content1 > .ns1 {
    width: 35%;
  }
  .content1 > .ns2 {
    width: 30%;
  }
  .content1 > .ns3 {
    width: 35%;
  }
  .content1 > .ns3 > .ws1 {
    text-align: right;
  }
  .content2 > .ns1 {
    width: 35%;
  }
  .content2 > .ns2 {
    width: 30%;
  }
  .content2 > .ns3 {
    width: 35%;
  }
  .content2 > .ns3 > .ws1 {
    text-align: right;
  }
  .content1 {
    margin-top: 0.533333rem;
    .f-flex();
    justify-content: space-between;
    .ns1 {
      text-align: left;
      margin-bottom: 0.266667rem;
      .ws1 {
        color: #b9bfd2;
        font-size: 0.32rem;
        font-weight: bold;
        margin-bottom: 0.266667rem;
      }
      .ws2 {
        color: #a1a7b7;
        font-size: 0.426667rem;
        font-weight: bold;
      }
    }
    .ns2 {
      text-align: left;
      margin-bottom: 0.266667rem;
      .ws1 {
        color: #b9bfd2;
        font-size: 0.32rem;
        font-weight: bold;
        margin-bottom: 0.266667rem;
      }
      .ws2 {
        color: #a1a7b7;
        font-size: 0.426667rem;
        font-weight: bold;
      }
    }
    .ns3 {
      text-align: right;
      margin-bottom: 0.266667rem;
      .ws1 {
        color: #b9bfd2;
        font-size: 0.32rem;
        font-weight: bold;
        margin-bottom: 0.266667rem;
      }
      .ws2 {
        color: #a1a7b7;
        font-size: 0.426667rem;
        font-weight: bold;
        text-align: right;
      }
    }
  }
  .content2 {
    .f-flex();
    margin-top: 0.273333rem;
    justify-content: space-between;
    .ns1 {
      text-align: left;
      margin-bottom: 0.266667rem;
      .ws1 {
        color: #b9bfd2;
        font-size: 0.32rem;
        font-weight: bold;
        margin-bottom: 0.266667rem;
      }
      .ws2 {
        color: #a1a7b7;
        font-size: 0.426667rem;
        font-weight: bold;
      }
    }
    .ns2 {
      text-align: left;
      margin-bottom: 0.266667rem;
      .ws1 {
        color: #b9bfd2;
        font-size: 0.32rem;
        font-weight: bold;
        margin-bottom: 0.266667rem;
      }
      .ws2 {
        color: #a1a7b7;
        font-size: 0.426667rem;
        font-weight: bold;
      }
    }
    .ns3 {
      text-align: right;
      margin-bottom: 0.266667rem;
      .ws1 {
        color: #b9bfd2;
        font-size: 0.32rem;
        font-weight: bold;
        margin-bottom: 0.266667rem;
      }
      .ws2 {
        color: #a1a7b7;
        font-size: 0.426667rem;
        font-weight: bold;
        text-align: right;
      }
    }
  }
}
</style>

